<script lang="ts" setup>
import { ref, reactive } from 'vue'
const prizeList = reactive(['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6', '奖品7', '奖品8'])
const len = prizeList.length - 1
const k = ref(-1)
let int: any = null
let rom = 0
let count = 0
let time = 500
const handleClick = () => {
  int = setInterval(pu, time)
  rom = Math.floor(Math.random() * prizeList.length)
  console.log(rom)
}
const pu = () => {
  if (k.value < len) {
    k.value++
  } else {
    k.value = 0
    count++
  }
  if (count <= 5) {
    if (time <= 100) {
      time = 100
    } else {
      time -= 20
    }
  } else {
    if (time >= 500) {
      time = 500
    } else {
      time += 20
    }
  }
  if (count > 7 && rom == k.value) {
    clearInterval(int)
    count = 0
    rom = 0
    time = 500
    console.log('中奖了: ' + prizeList[k.value])
  } else {
    clearInterval(int)
    int = setInterval(pu, time)
  }
}
</script>
<template>
  <div class="prize-draw">
    <h3>九宫格转盘抽奖</h3>
    <div class="list">
      <div :class="['item', { active: index === k }]" v-for="(item, index) in prizeList" :key="index">
        {{ item }}
      </div>
      <div class="item button" @click="handleClick">点击抽奖</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.prize-draw {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .list {
    width: 340px;
    height: 340px;
    position: relative;
    /* border: 1px #00ffff solid; */
    .item {
      width: 100px;
      height: 100px;
      background-color: royalblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      &.active {
        background-color: pink;
      }
      &:nth-child(1) {
        top: 10px;
        left: 10px;
      }
      &:nth-child(2) {
        top: 10px;
        left: 120px;
      }
      &:nth-child(3) {
        top: 10px;
        left: 230px;
      }
      &:nth-child(4) {
        top: 120px;
        left: 230px;
      }
      &:nth-child(5) {
        top: 230px;
        left: 230px;
      }
      &:nth-child(6) {
        top: 230px;
        left: 120px;
      }
      &:nth-child(7) {
        top: 230px;
        left: 10px;
      }
      &:nth-child(8) {
        top: 120px;
        left: 10px;
      }
      &.button {
        width: 100px;
        height: 100px;
        background-color: #62c6a3;
        text-align: center;
        line-height: 100px;
        top: 120px;
        left: 120px;
        cursor: pointer;
      }
    }
  }
}
</style>
